<!DOCTYPE html>
<html lang="en">
    <head>
      <title>David Bardwell Homework 1 part 2 version 2</title>
      <meta charset="utf-8">
      <style type="text/css">
        canvas {
          border: 2px solid;
        }
      </style>
      
      <script type="text/javascript">
        window.onload = function() {
          // access the canvas element and its context
          var canvas = document.getElementById("testCanvas");
          var context = canvas.getContext("2d");
          var radius = 200;
          var colorToFill = "#FF0000"; // start with red
            
          while (radius > 0) {
            context.fillStyle = colorToFill;
            context.beginPath();
            context.arc(200, 200, radius, 0, 2 * Math.PI, true);
            context.fill();
            context.closePath();

            // shrink radius for next ring and switch colors
            radius -= 25;
            if (colorToFill === "#FF0000") {
              colorToFill = "#0000FF";
            }
            else {
              colorToFill = "#FF0000";
            }
          }
        };
      </script>
    </head>
    <body>
         <canvas id="testCanvas" width="400" height="400"> </canvas>
    </body>
</html>
